<template>
    <div class="index-tabs">
        <div :key="index" @click="onClick(index)" :class="{'on':index==on}" v-for="(item,index) in list">{{item.text}}</div>
    </div>
</template>

<script setup>
const emit = defineEmits(['on-click'])

const on = ref('0')
const list = ref([
    { text: "IT/互联网" },
    { text: "金融" },
    { text: "咨询" },
    { text: "快消" },
    { text: "地产" },
    { text: "教育" },
    { text: "教育" },
    { text: "医疗" },
    { text: "法律" },
])


const onClick = index=>{
    on.value = index;
    emit('on-click',list[index])
}
</script>

<style lang="scss" scoped>
.index-tabs {
    display: flex;
    justify-content: center;
    >div {
        height: 30px;
        padding: 0 16px;
        margin-right: 17px;
        color: #fff;
        font-size: 13px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor:pointer;
        border: 1px solid transparent;

    }
    >div:hover,
    .on {
        background: #F8F8F8;
        border-radius: 20px;
        color: #4062FF;
        border: 1px solid #4062FF;
    }
}
</style>